Preline UI, crafted with Tailwind CSS

Built with:

Built with:: HTML; JavaScript; TypeScript

Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.

Get started Check out Preline Pro

1584+ Components & Examples

Hundreds of component examples for all your website needs that meet accessibility criteria.

Universal Framework Compatibility

Preline UI is fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.

Unlimited Custom Themes

Create consistent branded visuals with flexible themes across your project.

Supercharge your Tailwind CSS projects

Ship polished interfaces faster with Preline UI's free, open-source, and Pro Tailwind CSS UI components, blocks, plugins, templates, framework guides, and Figma design system.

944

Free & Pro Blocks

Build faster with Free & Pro Tailwind CSS blocks and layouts for Preline UI. 220+ blocks are free.

View all blocks

Tailwind CSS UI Plugins

Add accessible, headless plugins for dropdowns, modals, tabs, and more.

View all plugins

Framework Integration Guides

Use Preline UI with React, Vue, Next.js, Laravel, Ruby, Django, and more.

View guides

640+ Free Components

Build faster with free Tailwind CSS UI components for Preline UI, including buttons, forms, navbars, tables, and more.

View all components

21 Free & Premium Templates

Build faster with free demos and premium Tailwind CSS templates for Preline UI, including dashboards, websites, apps, and ecommerce.

View all templates

Free Figma Design System

Design faster with free Figma UI components for Preline UI and Tailwind CSS.

View Figma system

Unlimited Tailwind CSS Themes

Create custom themes that define your brand identity and apply consistent colors, fonts, and styles across every Preline UI component, block, and layout.

Theme:

Branding Colors:

Fonts:

Dark mode

<!DOCTYPE html>
<html lang="en" dir="ltr" class="relative min-h-full h-full border border-t-0 border-gray-200 rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700" data-theme="theme-default" data-brand="blue" data-font="sans">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Preline UI</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kode+Mono:wght@400..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/main.min.css">
      
    <style>
      html, body {
        height: auto !important;
        min-height: 0 !important;
      }
    </style>
  </head>
  <body>
  <div class="absolute inset-0 size-full -z-1">
    <div class="bg-size-[10px_10px] size-full bg-[linear-gradient(45deg,var(--color-stone-50)_7.14%,transparent_7.14%,transparent_50%,var(--color-stone-50)_50%,var(--color-stone-50)_57.14%,transparent_57.14%,transparent)] dark:bg-[linear-gradient(45deg,var(--color-neutral-800)_7.14%,transparent_7.14%,transparent_50%,var(--color-neutral-800)_50%,var(--color-neutral-800)_57.14%,transparent_57.14%,transparent)]"></div>
  </div>
  <div class="grid grid-cols-12 gap-4 p-4 md:p-6">
    <div class="col-span-full lg:col-span-8">
      <div class="flex flex-col gap-4">
        <div class="grid xl:grid-cols-[auto_1fr] gap-4">
          
          <div class="p-5 flex flex-col bg-card border border-card-line shadow-xs rounded-xl overflow-hidden">
            
            <div class="flex gap-3">
              <div class="mt-0.5 flex shrink-0 justify-center items-center size-8 bg-surface text-surface-foreground rounded-md">
                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg>
              </div>

<div class="grow">
                <h2 class="font-medium text-sm sm:text-base text-foreground">
                  Which CSS framework do you use the most?
                </h2>
      
                
                <ul class="flex flex-wrap items-center whitespace-nowrap gap-1.5">
                  <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                    <p class="text-xs text-muted-foreground-1">
                      Multiple choice
                    </p>
                  </li>
                  <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-2 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                    <p class="text-xs text-muted-foreground-1">
                      75 responses
                    </p>
                  </li>
                </ul>
                
              </div>
            </div>

<div class="flex flex-col gap-3 sm:gap-5">
                
                <div class="flex gap-2">
                  <span class="shrink-0 size-2.5 inline-block bg-chart-primary rounded-full mt-2"></span>
                  <div class="grow">
                    <div>
                      <span class="font-semibold text-sm text-foreground">
                        60%
                      </span>
                      <span class="text-sm text-foreground">
                        - Tailwind CSS
                      </span>
                    </div>
                    <p class="text-xs text-muted-foreground-1">
                      39 response
                    </p>
                  </div>
                </div>

<div class="flex gap-2">
                  <span class="shrink-0 size-2.5 inline-block bg-chart-6 rounded-full mt-2"></span>
                  <div class="grow">
                    <div>
                      <span class="font-semibold text-sm text-foreground">
                        30%
                      </span>
                      <span class="text-sm text-foreground">
                        - Bootstrap
                      </span>
                    </div>
                    <p class="text-xs text-muted-foreground-1">
                      27 response
                    </p>
                  </div>
                </div>

<div class="flex gap-2">
                  <span class="shrink-0 size-2.5 inline-block bg-chart-9 rounded-full mt-2"></span>
                  <div class="grow">
                    <div>
                      <span class="font-semibold text-sm text-foreground">
                        10%
                      </span>
                      <span class="text-sm text-foreground">
                        - Other
                      </span>
                    </div>
                    <p class="text-xs text-muted-foreground-1">
                      9 response
                    </p>
                  </div>
                </div>
                
              </div>
            </div>
          </div>

<div class="hidden xl:block">
            
            <div class="p-4 sm:p-6 bg-card border border-card-line rounded-xl">
              <div class="flex justify-between items-center gap-x-2 mb-3">
                <svg class="w-8.5 h-7.5" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-400 dark:fill-primary-700"/><rect x="14" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-600 dark:fill-primary-800"/></svg>
              </div>
              <p class="text-xl font-semibold text-foreground">
                Enterprise
              </p>
              <div class="mt-4 flex items-center gap-x-0.5">
                <span class="text-xl font-normal text-foreground">$</span>
                <p data-hs-toggle-count='{
                    "target": "#hs-pro-toggle-count",
                    "min": 119,
                    "max": 129
                  }' class="text-foreground font-semibold text-3xl tabular-nums">
                  119
                </p>
              </div>
              <p class="mt-1 text-xs text-muted-foreground-1">
                monthly, billed monthly
              </p>

<div class="mt-5">
                
                <button type="button" class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-dutprom" >
                  Upgrade to Enterprise
                </button>
              </div>

<ul class="mt-5 space-y-1">
                <li class="flex gap-x-2">
                  <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  <span class="text-sm text-foreground">
                    Unlimited seats
                  </span>
                </li>
                <li class="flex gap-x-2">
                  <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  <span class="text-sm text-foreground">
                    Plan features
                  </span>
                </li>
                <li class="flex gap-x-2">
                  <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  <span class="text-sm text-foreground">
                    Product support
                  </span>
                </li>
                <li class="flex gap-x-2">
                  <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  <span class="text-sm text-foreground">
                    Email sharing
                  </span>
                </li>
                <li class="flex gap-x-2">
                  <svg class="shrink-0 mt-0.5 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  <span class="text-sm text-foreground">
                    Activity reporting
                  </span>
                </li>
              </ul>
            </div>
            
          </div>
        </div>
  
        <div class="grid lg:grid-cols-[auto_1fr] gap-4">
          
          <ul class="flex flex-col bg-layer border border-layer-line rounded-xl -space-y-px">
            
            <li class="p-3 border-t border-layer-line first:border-t-0">
              <div class="flex gap-x-3">
                <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-red-500 text-foreground-inverse rounded-full">
                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M5.164 14H15c-1.5-1-2-5.902-2-7 0-.264-.02-.523-.06-.776L5.164 14zm6.288-10.617A4.988 4.988 0 0 0 8.995 2.1a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 7c0 .898-.335 4.342-1.278 6.113l9.73-9.73zM10 15a2 2 0 1 1-4 0h4zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75L.625 15.625z"/>
                  </svg>
                </span>
                <div class="grow">
                  <div class="flex justify-between items-center mb-1">
                    <p class="text-sm font-semibold text-foreground">
                      Offline
                    </p>
                    <label for="hs-pro-dsmofs" class="relative inline-block w-11 h-6 cursor-pointer">
                      <input type="checkbox" id="hs-pro-dsmofs" class="peer sr-only" checked>
                      <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                      <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                    </label>
                  </div>
                  <p class="text-xs text-muted-foreground-1">
                    Mute notifications and unassign new messages
                  </p>
                </div>
              </div>
            </li>

<li class="p-3 border-t border-layer-line first:border-t-0">
              <div class="flex gap-x-3">
                <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
                  </svg>
                </span>
                <div class="grow">
                  <div class="flex justify-between items-center mb-1">
                    <p class="text-sm font-semibold text-foreground">
                      Do not disturb
                    </p>
                    <label for="hs-pro-dsmdnds" class="relative inline-block w-11 h-6 cursor-pointer">
                      <input type="checkbox" id="hs-pro-dsmdnds" class="peer sr-only">
                      <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                      <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                    </label>
                  </div>
                  <p class="text-xs text-muted-foreground-1">
                    Mute notifications
                  </p>
                </div>
              </div>
            </li>

<li class="p-3 border-t border-layer-line first:border-t-0">
              <div class="flex gap-x-3">
                <span class="mt-0.5 shrink-0 flex flex-col justify-center items-center size-6.5 bg-yellow-500 text-foreground-inverse rounded-full">
                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                  </svg>
                </span>
                <div class="grow">
                  <div class="flex justify-between items-center mb-1">
                    <p class="text-sm font-semibold text-foreground">
                      Schedule
                    </p>
                    <label for="hs-pro-dsmschs" class="relative inline-block w-11 h-6 cursor-pointer">
                      <input type="checkbox" id="hs-pro-dsmschs" class="peer sr-only">
                      <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                      <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                    </label>
                  </div>

<div class="mt-3 sm:mt-1 flex flex-wrap items-center gap-2">
                    
                    <div class="relative">
                      <select id="hs-pro-select-time1" data-hs-select='{
                          "placeholder": "Select option...",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                          "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                          "viewport": "#hs-modal-status-body"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option>12:01 AM</option>
                        <option>1:00 AM</option>
                        <option>2:00 AM</option>
                        <option>3:00 AM</option>
                        <option>4:00 AM</option>
                        <option>5:00 AM</option>
                        <option>6:00 AM</option>
                        <option>7:00 AM</option>
                        <option>8:00 AM</option>
                        <option selected>9:00 AM</option>
                        <option >10:00 AM</option>
                        <option>11:00 AM</option>
                        <option>12:01 PM</option>
                        <option>1:00 PM</option>
                        <option>2:00 PM</option>
                        <option>3:00 PM</option>
                        <option>4:00 PM</option>
                        <option>5:00 PM</option>
                        <option>6:00 PM</option>
                        <option>7:00 PM</option>
                        <option>8:00 PM</option>
                        <option>9:00 PM</option>
                        <option>10:00 PM</option>
                        <option>11:00 PM</option>
                      </select>
                    </div>

<span class="text-sm text-muted-foreground-1">to:</span>
          
                    
                    <div class="relative">
                      <select id="hs-pro-select-time2" data-hs-select='{
                          "placeholder": "Select option...",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-4 pe-7 flex text-nowrap w-full cursor-pointer bg-surface rounded-lg text-start text-sm text-surface-foreground focus:outline-hidden focus:bg-surface-focus before:absolute before:inset-0 before:z-1",
                          "dropdownClasses": "mt-2 z-50 w-full min-w-36 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>",
                          "viewport": "#hs-modal-status-body"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option>12:01 AM</option>
                        <option>1:00 AM</option>
                        <option>2:00 AM</option>
                        <option>3:00 AM</option>
                        <option>4:00 AM</option>
                        <option>5:00 AM</option>
                        <option>6:00 AM</option>
                        <option>7:00 AM</option>
                        <option>8:00 AM</option>
                        <option >9:00 AM</option>
                        <option selected>10:00 AM</option>
                        <option>11:00 AM</option>
                        <option>12:01 PM</option>
                        <option>1:00 PM</option>
                        <option>2:00 PM</option>
                        <option>3:00 PM</option>
                        <option>4:00 PM</option>
                        <option>5:00 PM</option>
                        <option>6:00 PM</option>
                        <option>7:00 PM</option>
                        <option>8:00 PM</option>
                        <option>9:00 PM</option>
                        <option>10:00 PM</option>
                        <option>11:00 PM</option>
                      </select>
                    </div>
                    
                  </div>
                  
                </div>
              </div>
            </li>
            
          </ul>
          
  
          
          <div class="relative flex flex-col gap-0.5">
            
            <div class="p-4 bg-layer border border-layer-line rounded-2xl">
              <div>
                <label for="hs-pro-pysmyp" class="block text-sm text-muted-foreground-1">
                  You pay
                </label>

<div class="py-2 flex items-center gap-x-3">
                  <div class="grow">
                    <input id="hs-pro-pysmyp" type="text" class="p-0 block w-full bg-transparent border-transparent rounded-0 text-4xl text-foreground placeholder:text-muted-foreground focus:border-transparent focus:ring-0 focus:placeholder:text-foreground focus:text-foreground [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" placeholder="0" value="100" >
                  </div>
        
                  <div class="min-w-32 text-end">
                    <label class="sr-only">
                      Currency
                    </label>
          
                    
                    <div class="relative inline-block">
                      <select  data-hs-select='{
                          "placeholder": "Choose a currency",
                          "hasSearch": true,
                          "searchPlaceholder": "Type a currency",
                          "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                          "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-sm text-foreground\" data-title></span></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 flex items-center gap-x-1.5 text-nowrap cursor-pointer bg-layer border border-layer-line rounded-full text-start text-sm sm:text-base hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus",
                          "dropdownClasses": "z-80 inset-e-0 w-72 max-h-72 p-1 pt-0 space-y-0.5 z-50 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                          "preventSearchFocus": "false"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option  value="USD" data-hs-select-option='{
                          "description": "United States Dollar",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"./assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                          USD
                        </option>
                        <option  value="GBP" data-hs-select-option='{
                          "description": "British Pound",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"./assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                          GBP
                        </option>
                        <option selected value="EURO" data-hs-select-option='{
                          "description": "EUR",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"./assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                          EURO
                        </option>
                      </select>
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>

<div class="h-0">
              <div class="-mt-6">
                <button type="button" class="relative z-10 flex shrink-0 justify-center items-center size-12 mx-auto bg-surface border-3 border-layer text-layer-foreground rounded-full hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus">
                  <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
                </button>
              </div>
            </div>

<div class="p-4 flex items-center gap-x-3 bg-surface rounded-2xl">
              <div>
                <label for="hs-pro-pysmrg" class="block text-sm text-muted-foreground-1">
                  Recipient gets
                </label>

<div class="py-2 flex items-center gap-x-3">
                  <div class="grow">
                    <input id="hs-pro-pysmrg" type="text" class="p-0 block w-full bg-transparent border-transparent rounded-0 text-4xl text-foreground placeholder:text-muted-foreground focus:border-transparent focus:ring-0 focus:placeholder:text-foreground focus:text-foreground [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" placeholder="0" value="90.42" >
                  </div>
        
                  <div class="min-w-32 text-end">
                    <label class="sr-only">
                      Currency
                    </label>
          
                    
                    <div class="relative inline-block">
                      <select  data-hs-select='{
                          "placeholder": "Choose a currency",
                          "hasSearch": true,
                          "searchPlaceholder": "Type a currency",
                          "searchClasses": "block py-1.5 sm:py-2 px-3 w-full sm:text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                          "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"flex\" data-icon></span><span class=\"text-sm text-foreground\" data-title></span></button>",
                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1 ps-1.5 pe-7 flex items-center gap-x-1.5 text-nowrap cursor-pointer bg-layer border border-layer-line rounded-full text-start text-sm sm:text-base hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus",
                          "dropdownClasses": "z-80 inset-e-0 w-72 max-h-72 p-1 pt-0 space-y-0.5 z-50 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                          "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"shrink-0 me-2\" data-icon></div><div class=\"grow\"><div class=\"flex justify-between items-center gap-x-3\"><div class=\"text-foreground\" data-title></div><div class=\"text-muted-foreground-1\" data-description></div></div></div></div></div>",
                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                          "preventSearchFocus": "false"
                        }' class="hidden">
                        <option value="">Choose</option>
                        <option selected value="USD" data-hs-select-option='{
                          "description": "United States Dollar",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"./assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States Dollar\" />"}'>
                          USD
                        </option>
                        <option  value="GBP" data-hs-select-option='{
                          "description": "British Pound",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"./assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"British Pound\" />"}'>
                          GBP
                        </option>
                        <option  value="EURO" data-hs-select-option='{
                          "description": "EUR",
                          "icon": "<img class=\"inline-block shrink-0 size-4 rounded-full\" src=\"./assets/vendor/svg-country-flags/png100px/eu.png\" alt=\"EUR\" />"}'>
                          EURO
                        </option>
                      </select>
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>

<div class="mt-3 flex flex-wrap gap-2">
              
              <label for="hs-pro-pymtmdp10" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
              has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
              dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
              has-disabled:pointer-events-none
              has-disabled:text-muted-foreground/30">
                <input type="radio" id="hs-pro-pymtmdp10" class="hidden peer" name="hs-pro-pymtmdp" >
                <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                  <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="block">
                  10 USD
                </span>
              </label>

<label for="hs-pro-pymtmdp25" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
              has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
              dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
              has-disabled:pointer-events-none
              has-disabled:text-muted-foreground/30">
                <input type="radio" id="hs-pro-pymtmdp25" class="hidden peer" name="hs-pro-pymtmdp" >
                <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                  <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="block">
                  25 USD
                </span>
              </label>

<label for="hs-pro-pymtmdp50" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
              has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
              dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
              has-disabled:pointer-events-none
              has-disabled:text-muted-foreground/30">
                <input type="radio" id="hs-pro-pymtmdp50" class="hidden peer" name="hs-pro-pymtmdp" >
                <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                  <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="block">
                  50 USD
                </span>
              </label>

<label for="hs-pro-pymtmdp100" class="py-2 px-2.5 relative flex justify-center items-center text-center text-[13px] bg-layer border border-layer-line ring-1 ring-transparent text-layer-foreground cursor-pointer rounded-xl hover:border-primary-hover hover:ring-primary-hover
              has-checked:bg-primary-100 has-checked:border-primary-200 has-checked:ring-primary-200 has-checked:text-primary-800
              dark:has-checked:bg-primary-800/30 dark:has-checked:border-primary-800/50 dark:has-checked:ring-primary-800/50 dark:has-checked:text-primary-500
              has-disabled:pointer-events-none
              has-disabled:text-muted-foreground/30">
                <input type="radio" id="hs-pro-pymtmdp100" class="hidden peer" name="hs-pro-pymtmdp" checked>
                <span class="flex shrink-0 justify-center items-center size-0 bg-primary text-transparent rounded-full will-change-transform backface-hidden translate-z-0 transition-all duration-200 peer-checked:size-4 peer-checked:me-1.5 peer-checked:text-primary-foreground">
                  <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="block">
                  100 USD
                </span>
              </label>
              
            </div>
            
          </div>
          
        </div>
  
        <div class="hidden lg:block">
          
          <footer class="border rounded-lg bg-layer border-t border-layer-line">
            <label for="hs-pro-chtfwtiwrb1" class="sr-only">Message</label>

<span class="peer-checked:hidden">
                      Team_messaging
                    </span>

<span class="hidden peer-checked:inline">
                      Replying_to_Costa
                    </span>
                  </label>
                  
                </div>
              </div>
    
              <div class="pe-4 flex justify-between items-center gap-x-1">
                
                <div class="flex items-center gap-x-1">
                  
                  <button type="button" class="flex justify-center items-center gap-x-1.5 size-8 text-sm text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                    <span class="sr-only">Attach file</span>
                  </button>
                  
        
                  
                  <button type="button" class="flex justify-center items-center gap-x-1.5 size-8 text-sm text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                    <span class="sr-only">Add emoji</span>
                  </button>
                  
        
                  
                  <div class="hs-dropdown relative [--strategy:absolute] [--placement:bottom] inline-flex">
                    <button id="hs-pro-chtfwtiwrb1maid1" type="button" class="py-1.5 px-2.5 flex items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                      <span class="bg-clip-text bg-linear-to-tl from-blue-600 to-purple-400 text-transparent">Magic AI</span>
                      <svg class="shrink-0 size-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-44 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chtfwtiwrb1maid1">
                      <div class="p-1">
                        <a class="flex items-center gap-x-3 py-1.5 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                          <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
                          Predict
                        </a>
                      </div>
                      <div class="p-1 border-t border-dropdown-divider">
                        <a class="flex items-center gap-x-3 py-1.5 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                          <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                          Rephrase
                        </a>
                        <a class="flex items-center gap-x-3 py-1.5 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                          <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                          Fix grammer
                        </a>
                      </div>
                      <div class="p-1 border-t border-dropdown-divider">
                        <a class="flex items-center gap-x-3 py-1.5 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                          <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
                          More friendly
                        </a>
                        <a class="flex items-center gap-x-3 py-1.5 px-2.5 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                          <svg class="shrink-0 mt-0.5 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
                          More formal
                        </a>
                      </div>
                    </div>
                    
                  </div>
                  
                </div>

<div class="flex items-center gap-x-1">
                  
                  <button type="button" class="flex justify-center items-center gap-x-1.5 size-8 text-sm text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                    <span class="sr-only">Send voice message</span>
                  </button>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-8 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                    <span class="sr-only">Send</span>
                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                  </button>
                  
                </div>
                
              </div>
            </div>
          </footer>

</div>
      </div>
    </div>
  
    <div class="col-span-full lg:col-span-4">
      <div class="bg-card border border-card-line rounded-lg">
        
        <div class="relative z-1 ">
          
          <div class="p-4 pb-0">
            <div class="pb-2 flex flex-wrap justify-between items-center gap-2 border-b border-dashed border-line-2">
              <h2 class="font-medium text-sm text-foreground">
                Top authors
              </h2>

<button type="button" class="group inline-flex items-center text-[13px] text-start text-muted-foreground-1">
                <span class="block me-1">
                  Next:
                </span>
                <span class="inline-flex items-center text-primary underline-offset-2 decoration-2 group-hover:underline group-hover:text-primary-hover group-focus:underline group-focus:text-primary-focus">
                  Niki Kray
                  <svg class="shrink-0 size-4 ms-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                </span>
              </button>
              
            </div>
          </div>

<div class="p-4">
            
            <div class="flex items-center gap-x-3">
              <span class="relative size-14 shrink-0 bg-secondary rounded-full">
                <img class="absolute inset-0 size-full object-cover rounded-full" src="https://images.unsplash.com/photo-1719937206140-c4b208c78aa7?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
              </span>
              <div class="grow">
                <p class="font-medium text-lg text-foreground">
                  Brian Williams
                </p>
              </div>
            </div>

<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-2">
              
              <div class="flex flex-col gap-y-1">
                <span class="text-[13px] text-muted-foreground-1">
                  Published posts:
                </span>

<div class="flex flex-col gap-y-1">
                <span class="text-[13px] text-muted-foreground-1">
                  Avg. post views:
                </span>

<span class="font-medium text-sm text-foreground">
                    285
                  </span>
                </div>
              </div>
              
      
              
              <div class="flex flex-col gap-y-1">
                <span class="text-[13px] text-muted-foreground-1">
                  Total comments:
                </span>
        
                <div class="flex items-center gap-x-1.5">
                  <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
  
                  <span class="font-medium text-sm text-foreground">
                    18
                  </span>
                </div>
              </div>

<div class="flex flex-col gap-y-1">
                <span class="text-[13px] text-muted-foreground-1">
                  Posts referred:
                </span>

<div class="pt-5 mt-5 border-t border-line-2">
              
              <div class="grid grid-cols-2 gap-2">
                <div class="flex flex-col">
                  
                  <div class="my-3 flex -space-x-3">
                    <img class="shrink-0 size-6 relative z-2 ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                    <img class="shrink-0 size-6 relative z-1 -mt-3 ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                    <img class="shrink-0 size-6 relative ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                  </div>

<h3 class="text-sm text-muted-foreground-1">
                    Total views
                  </h3>

<div id="hs-pro-atatpvch" class="min-h-22.5"></div>
              </div>

<div class="pt-5 mt-5 border-t border-line-2">
              
              <div class="relative flex items-center gap-1">
                
                <svg class="shrink-0 size-12" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                  <g transform="translate(32,32)">
                    <g>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(0)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(30)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(60)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(90)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(120)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(150)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(180)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(210)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(240)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(270)" class="text-primary"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(300)" class="text-layer"></rect>
                      <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(330)" class="text-layer"></rect>
                    </g>
                  </g>
                </svg>

<div class="grow pe-20">
                  <div class="flex flex-col">
                    <span class="block text-[13px] text-muted-foreground-1">
                      Content quality score
                    </span>
                    <div class="flex items-center gap-2">
                      <span class="block font-medium text-sm text-foreground">
                        76%
                      </span>
                      <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                        3.4%
                      </span>
                    </div>
                  </div>
                </div>

<div class="absolute top-1/2 inset-e-0 -translate-y-1/2">
                  <button type="button" class="group size-7 lg:size-auto lg:py-1.5 lg:px-2 flex items-center justify-center border border-layer-line text-layer-foreground text-xs rounded-full py-1 hover:bg-primary-50 hover:border-primary-100 hover:text-primary-700 focus:outline-none focus:bg-primary-50 focus:border-primary-100 focus:text-primary-700 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
                    <span class="lg:block hidden max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                      View all
                    </span>
                    <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
                  </button>
                </div>
                
              </div>

<ul class="mt-5 flex flex-col gap-y-3">
                
                <li class="flex justify-between items-center gap-x-2">
                  <div class="flex flex-col gap-y-1">
                    <span class="block text-[13px] text-muted-foreground-1">
                      Title/subject length
                    </span>
                    <span class="block font-medium text-sm text-foreground">
                      50-60
                    </span>
                  </div>

<li class="flex justify-between items-center gap-x-2">
                  <div class="flex flex-col gap-y-1">
                    <span class="block text-[13px] text-muted-foreground-1">
                      Body word count
                    </span>
                    <span class="block font-medium text-sm text-foreground">
                      300–800
                    </span>
                  </div>

<li class="flex justify-between items-center gap-x-2">
                  <div class="flex flex-col gap-y-1">
                    <span class="block text-[13px] text-muted-foreground-1">
                      Tags/keywords
                    </span>
                    <span class="block font-medium text-sm text-foreground">
                      3-8
                    </span>
                  </div>

<li class="flex justify-between items-center gap-x-2">
                  <div class="flex flex-col gap-y-1">
                    <span class="block text-[13px] text-muted-foreground-1">
                      Broken links
                    </span>
                    <span class="block font-medium text-sm text-foreground">
                      2
                    </span>
                  </div>

<li class="flex justify-between items-center gap-x-2">
                  <div class="flex flex-col gap-y-1">
                    <span class="block text-[13px] text-muted-foreground-1">
                      Spelling & grammar
                    </span>
                    <span class="block font-medium text-sm text-foreground">
                      100%
                    </span>
                  </div>

<div class="flex flex-col justify-end items-end gap-1">
                    <div class="flex justify-end items-center gap-1">
                      <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                      <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                      <span class="shrink-0 w-1 h-3.5 inline-block bg-primary rounded-full"></span>
                    </div>
            
                    <p class="text-[13px] text-primary">
                      Good
                    </p>
                  </div>
                  
                </li>
                
              </ul>
              
            </div>
            
          </div>
          
        </div>
        
      </div>
    </div>
  </div>
    <script src="./assets/vendor/preline/dist/index.js?v=4.2.0"></script>
    
    <script>
      (function () {
        const html = document.documentElement;
        const appearance = localStorage.getItem("hs_theme") || "default";
        const resolvedAppearance = appearance === "auto"
          ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default")
          : appearance;
        const colorTheme = localStorage.getItem("hs-clipboard-theme") || "default";
        const brand = localStorage.getItem("hs-clipboard-brand");
        const font = localStorage.getItem("hs-clipboard-font");

html.classList.toggle("dark", resolvedAppearance === "dark");
        html.setAttribute("data-theme", `theme-${colorTheme}`);
        if (brand) html.setAttribute("data-brand", brand);
        if (font) html.setAttribute("data-font", font);
      })();
    </script>

if (!data.type) return false;
        if (data.type === "hs:color-theme-change") {
          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
            detail: {
              target: document.documentElement,
              value: data.value
            }
          }));
        }
      });
    </script>
    <script>
      (function () {
        buildChart(
          "#hs-pro-asdwrb",
          (mode) => ({
            chart: {
              height: 250,
              width: 250,
              type: "radialBar",
              zoom: {
                enabled: false,
              },
            },
            responsive: [
              {
                breakpoint: 1600,
                options: {
                  chart: {
                    height: 220,
                    width: 220
                  }
                }
              },
              {
                breakpoint: 600,
                options: {
                  chart: {
                    height: 200,
                    width: 200
                  }
                }
              },
            ],
            series: [60, 30, 10],
            plotOptions: {
              radialBar: {
                hollow: {
                  margin: 5,
                  size: '35%'
                },
                track: {
                  background: mode === 'dark' ? varToColor('--chart-colors-chart-8-inverse') : varToColor('--chart-colors-chart-8'),
                  strokeWidth: '97%',
                  margin: 5,
                },
                dataLabels: {
                  show: false
                },
              }
            },
            stroke: {
              lineCap: 'round'
            },
            legend: {
              show: false,
            },
            grid: {
              padding: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
              },
            },
            states: {
              hover: {
                filter: {
                  type: "none",
                },
              },
            },
            tooltip: {
              enabled: false,
            },
          }),
          () => ({
            colors: [varToColor('--chart-colors-primary'), varToColor('--chart-colors-chart-6'), varToColor('--chart-colors-chart-10')],
            stroke: {
              colors: [varToColor('--chart-colors-background')],
            },
          }),
          () => ({
            colors: [varToColor('--chart-colors-primary-inverse'), varToColor('--chart-colors-chart-6-inverse'), varToColor('--chart-colors-chart-10-inverse')],
            stroke: {
              colors: [varToColor('--chart-colors-background-inverse')],
            },
          })
        );
      })();
    </script>
    
    <script>
      (() => {
        let lastHeight = 0;
        const sendHeight = () => {
          const body = document.body;
          const doc = document.documentElement;
          const bodyHeight = body ? body.getBoundingClientRect().height : 0;
          const docHeight = doc.getBoundingClientRect().height;
          const height = Math.ceil(Math.max(bodyHeight, docHeight));

if (height === lastHeight || height === 0) return false;
          
          lastHeight = height;
          
          parent.postMessage({ type: "hs:theme-demo-resize", height }, "*");
        };
        const observer = new ResizeObserver(sendHeight);
        
        observer.observe(document.documentElement);
        if (document.body) observer.observe(document.body);

const scheduleSendHeight = () => {
          requestAnimationFrame(sendHeight);
        };

Some examples shown in the demo are Preline Pro content.

Learn more about Themes

Loved by Developers and Designers

Real feedback from teams building faster with Preline UI, Tailwind CSS components, blocks, and the Figma design system.

Vosidiy Muslimbek

I don't know how to thank for such a good file, It should be paid product actually.

Thabresh Syed

Preline UI is a game-changer for anyone working with UI development! As a fan of open source projects and a lover of efficiency, I couldn't be happier with what Preline UI brings to the table. This set of prebuilt UI components takes the power of the popular Tailwind CSS framework and supercharges it, making the entire UI development process a breeze.

Vitor Machado

This is huge! I appreciate so much for the effort, such high quality file! big thanks! Is there a way to support you for your work?

Muttaqi

Underratted

Hillary Onyechekwa

Preline UI is freaking amazing. How is it free again? I'm in love man. 😍

by a Preline UI user

Continue what you're doing. You're such a great help to a lot of developers. Thank you!

Kevin Fairbanks

time saver for sure, beautiful designs wish I discovered sooner

Daniel

Hi there, I just wanted to say congrats on developing such an excellent Figma design system. I've spent months going around in circles looking for something that is complete and easily nk I've found my foundation. It's really excellent work you've done here. I'm looking forward to seeing where you take this.

Wasimul Sami

http://Preline.co is just amazing. @prelineUI, guys, unbelievably, you made it free. A lot of time saved for you guys. Thanks 🙏

Bonnie

I am working on my website landing page and prebuilt TailwindCSS UI components from http://preline.co are a lifesaver.

RichCode

Decide to try out @prelineUI on a new @nextjs project and have to say, it's pretty dope. Hooked on day one😄

Avvicy ❙ AI

Combining Tailwind CSS with Preline UI can definitely boost productivity. Preline UI offers additional components and features that can enhance your development process. Give it a try!

Hillary Onyechekwa

Preline UI is freaking amazing. How is it free again? I'm in love man. 😍

by a Preline UI user

Continue what you're doing. You're such a great help to a lot of developers. Thank you!

RichCode

Decide to try out @prelineUI on a new @nextjs project and have to say, it's pretty dope. Hooked on day one😄

Avvicy ❙ AI

Combining Tailwind CSS with Preline UI can definitely boost productivity. Preline UI offers additional components and features that can enhance your development process. Give it a try!

640+

Tailwind CSS UI Components

Explore the complete open-source Tailwind CSS UI component library for building accessible, responsive websites and apps.

Accordion

8 components

Advanced Select

40 components

Avatar Group

5 components

Timeline

5 components

Sidebar

10 components

Buttons

16 components

Dropdown

22 components

Badge

14 components

Tables

19 components

Datepicker

6 components

Switch/Toggle

10 components

Marquee

3 components

View all 640+ components

944

Tailwind CSS Blocks

Browse ready-made Tailwind CSS blocks and page examples for dashboards, marketing pages, ecommerce, forms, charts, modals, and more.

Chart Compositions

9 components

Dashboard Headers

7 components

Bar Charts

7 components

KPI Cards

17 components

Product Review Sections

3 components

Product Grids

2 components

Project Tables

3 components

Hero Sections

13 components

Create & Edit Form Modals

8 components

Checkout Flow Pages

8 components

Advanced Forms

5 components

Application Navbars

5 components

Browse 944 Blocks

Tailwind CSS Templates

Launch faster with free and premium Tailwind CSS templates for dashboards, admin panels, ecommerce, websites, AI, support, and more.

31 pages

Admin Dashboard

Most commonly used Application pages with user profile, account settings and more.

Preview Item Details

39 pages

Storefront

Engaging shopping experiences with advanced product filters, detailed descriptions, easy checkout, and full account management.

Preview Item Details

6 pages

SaaS Startup

A sleek marketing template for startups, featuring modern design, conversion-focused sections, and seamless user experience.

Preview Item Details

14 pages

Ecommerce Admin

Powerful ecommerce admin pages with product & order lists, referrals and more.

Preview Item Details

10 pages

Digital Agency

Agency demo showcases a bold, modern layout for creative and digital service firms, featuring services, success stories, and brand-driven storytelling.

Preview Item Details

Explore all 21 templates

Free Figma Design System

Design faster with the Preline UI Figma library, featuring free UI components, Tailwind CSS styles, design tokens, variants, and theme-ready assets.

Explore now

Get started with Preline UI

Install Preline UI and start building with components, plugins, blocks, and templates to supercharge your Tailwind CSS projects.

Get started

Get started in seconds and ship faster with Preline UI.